<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加用户</title>

    <link rel="stylesheet" href="../../lib/bootstrap-3.3.7/css/bootstrap.css">

    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../lib/element-ui/element-ui-2.8.2.css">

</head>
<body>
<div id="app">

    <el-row type="flex" justify="center">

        <el-col :span="10">

            <el-form v-loading="loading" :model="form" ref="form" :rules="rules" label-width="80px" label-position="right">

                <el-form-item label="登录名" prop="account">
                    <el-input v-model="form.account" clearable></el-input>
                </el-form-item>

                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" clearable></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" type="password" show-password></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="checkPassword">
                    <el-input v-model="form.checkPassword" type="password" show-password></el-input>
                </el-form-item>

                <el-form-item label="性别" prop="sex">
                    <el-switch v-model="form.sex" inactive-text="男" active-text="女"></el-switch>
                </el-form-item>

                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="form.idCard" clearable></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="phone">
                    <el-input v-model.number="form.phone" clearable></el-input>
                </el-form-item>


                <el-form-item label="住址" prop="province">
                    <!--                    <el-cascader-->
                    <!--                            :props="props"-->
                    <!--                            :options="provinceOptions"-->
                    <!--                            v-model="form.selectOptions"-->
                    <!--                            filterable-->
                    <!--                            separator="-"-->
                    <!--                            show-all-levels-->
                    <!--                            placeholder="请选择地址"-->
                    <!--                            @change="handleChange"-->
                    <!--                    >-->

                    <!--                    </el-cascader>-->

                    <el-select
                            v-model="form.province"
                            placeholder="请选择省份"
                            filterable
                            @focus="getProvince"
                            @change="getCities"

                    > <!--省 -->

                        <el-option
                                v-for="province in provinceOptions"
                                :key="province.id"
                                :label="province.name"
                                :value="province.provinceId"
                        ></el-option>

                    </el-select>

                    <el-select
                            v-model="form.city"
                            placeholder="请选择城市"
                            @change="getCountry"
                    > <!--市-->

                        <el-option
                                v-for="cities in citiesOptions"
                                :key="cities.id"
                                :label="cities.name"
                                :value="cities.cityId"
                        ></el-option>

                    </el-select>

                    <el-select v-model="form.country" placeholder="请选择区"> <!--区-->

                        <el-option
                                v-for="country in countryOptions"
                                :key="country.id"
                                :label="country.name"
                                :value="country.countryId"
                        ></el-option>

                    </el-select>

<!--                    <el-select v-model="form.country" placeholder="请选择街道"> &lt;!&ndash;区&ndash;&gt;-->

<!--                        <el-option-->
<!--                                v-for="country in countryOptions"-->
<!--                                :key="country.id"-->
<!--                                :label="country.name"-->
<!--                                :value="country.countryId"-->
<!--                        ></el-option>-->

<!--                    </el-select>-->


                </el-form-item>

                <el-form-item label="部门" prop="department">
                    <el-select
                            v-model="form.department"
                            placeholder="请选择部门"
                            @focus="getDepartment"
                    >

                        <el-option
                                v-for="item in departmentOptions"
                                :key="item.deptCode"
                                :label="item.deptName"
                                :value="item.deptCode"
                        ></el-option>
                    </el-select>

                </el-form-item>

                <el-form-item>

                    <el-button type="primary" round @click="submitForm('form')">提交</el-button>
                    <el-button type="danger" round @click="resetForm('form')">重置</el-button>
                </el-form-item>


            </el-form>

        </el-col>


    </el-row>


</div>
</body>
</html>

<script src="../../lib/jQuery-3.31/jquery-3.3.1.js"></script>
<script src="../../lib/vue/vue.js"></script>
<script src="../../lib/element-ui/element-ui.js"></script>

<script>


    const app = new Vue({
        el: "#app",
        data: {
            form: {
                account: '',
                name: '',
                password: '',
                checkPassword: '',
                sex: false,
                idCard: '',
                phone: '',
                province: '',
                city: '',
                country: '',
                department: ''

            },

            loading: false,

            departmentOptions: [],

            provinceOptions: [],

            citiesOptions: [],

            countryOptions: [],

            rules: {
                account: [
                    {required: true, message: '请输入登录名', trigger: 'blur'},
                    {min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur'},

                    {
                        validator: function (rule, value, callback) {
                            $.ajax({

                                url: "/system/checkUserAccount",
                                type: 'get',
                                dataType: 'json',
                                data: { 'userAccount': value },
                                success: function (result) {

                                    if (result.success === false){
                                        callback(new Error(result.msg));
                                    } else {
                                        callback();
                                    }
                                }
                            })
                        }, trigger: 'blur'
                    }
                ],


                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'},
                    {
                        validator: function (rule, value, callback) {

                            if (/^[\u4E00-\u9FA5]+$/.test(value) === false) {

                                callback(new Error("姓名必须为中文"));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],


                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 16, message: '长度需在 6 到 16 位字符', trigger: "blur"}
                ],


                checkPassword: [

                    {required: true, message: '请再次输入密码', trigger: 'blur'},
                    {
                        validator: function (rule, value, callback) {

                            if (value !== app.form.password) {
                                callback(new Error('两次填写的密码不一致'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'blur'

                    }

                ],


                idCard: [

                    {required: true, message: '请输入身份证号', trigger: 'blur'},
                    {
                        validator: function (rule, value, callback) {

                            if (/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value) === false) {
                                callback(new Error("身份证格式不正确"));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],


                phone: [
                    {required: true, message: '请输入手机号', trigger: 'blur'},
                    {
                        validator: function (rule, value, callback) {
                            if (/^1[34578]\d{9}$/.test(value) === false) {
                                callback(new Error("请输入正确的手机号"));
                            } else {
                                callback();
                            }
                        }, trigger: 'blur'
                    }
                ],

                department:[

                    {required:true,message:'请选择部门',trigger:'blur'}

                ]

            },


        },

        methods: {


            getProvince: function () {

                const isGetProvince = false;
                if (isGetProvince === false) {

                    $.ajax({
                        url: "/regions/province",
                        type: 'get',
                        dataType: 'json',
                        success: function (result) {
                            if (result.success === true && isGetProvince === false) {

                                app.provinceOptions = result.data;

                                this.isGetProvince = true;
                            }
                        }
                    });
                }
            },

            /**
             * 获得城市
             *
             * */
            getCities: function (value) {

                const isGetCities = false;
                if (isGetCities === false) {

                    $.ajax({

                        url: "/regions/cities",
                        type: "get",
                        data: {"provinceId": value},
                        dataType: "json",
                        success: function (result) {

                            if (result.success === true && isGetCities === false) {

                                app.citiesOptions = result.data;
                                this.isGetCities = true;

                                app.form.cities = '';
                                app.form.country = '';
                            }
                            if (result.success === false) {

                                result.msg();
                            }

                        }

                    })
                }
            },

            getCountry: function (value) {

                const isGetCountry = false;

                if (isGetCountry === false) {


                    $.ajax({

                        url: "/regions/country",
                        type: 'get',
                        data: {'cityId': value},
                        dataType: 'json',
                        success: function (result) {

                            if (result.success === true && isGetCountry === false) {

                                var idnum = "";
                                var name = "";
                                app.countryOptions = result.data;
                                this.isGetCities = true;
                            }

                        }


                    })

                }
            },

            /**
             * 获得部门
             * */
            getDepartment: function () {

                const isGetDepartment = false;

                if (isGetDepartment === false) {


                    $.ajax({
                        url: "/adduser/department",
                        type: 'get',
                        dataType: 'json',
                        success: function (result) {
                            if (result.success === true) {

                                app.departmentOptions = result.data;
                                this.isGetDepartment = true;

                            }
                        }
                    })
                }
            },



            /**
             * 提交
             * @param formName
             */
            submitForm: function(formName) {

                this.$refs[formName].validate((valid) => {

                    if (valid) {
                        $.ajax({

                            url: "/system/saveUserInfo",
                            type: 'get',
                            dataType: 'json',
                            data: {
                                'userAccount': app.form.account,
                                'password': app.form.password,
                                'name': app.form.name,
                                'sex': app.form.sex ? '2': '1',
                                'idCard': app.form.idCard,
                                'phone': app.form.phone,
                                'deptCode': app.form.department,
                                'provinceId': app.form.province,
                                'cityId': app.form.city,
                                'countryId': app.form.country

                            },

                            beforeSend: function(){

                                app.loading = true;


                            },

                            success: function (result) {

                                if (result.success === true){

                                    app.loading = false;
                                    app.$notify({

                                        title: '成功',
                                        message: result.msg,
                                        type: 'success'

                                    })



                                }else {

                                    app.loading = false;
                                    app.$notify({

                                        title: '错误',
                                        message: result.msg,
                                        type: 'error'

                                    })

                                }

                            },
                            complete: function () {

                                app.loading = false;
                            }


                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },


            /**
             * 重置
             * @param formName
             */
            resetForm: function(formName) {

                this.$refs[formName].resetFields();
                app.form.cities = '';
                app.form.country = '';


            },


        }

    })


</script>